import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { PeopleService, People, Animal } from './people.service';
import { HttpErrorResponse } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  people$:People[];
  animal$:Observable<Animal[]>;
  message = null;

  constructor(private peopleService:PeopleService){}

  fetchPeople(){
    this.peopleService.fetchPeople().subscribe(
      response => {
        this.people$ = response;
      },
      (error:HttpErrorResponse) =>{
        if(error instanceof Error){
          this.message = `An error occured at frontend, ${error.error.message}`;
        }else{
          this.message = `Backend return error, status was ${error.status}, body ws ${error.message}`
        }
      }
    )
  }
  fetchAnimal(){
    this.animal$ = this.peopleService.fetchAnimal();
  }
}
